<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="timerange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.order_id" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="form.keyword" placeholder="用户名称/手机号"></el-input>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form> 
        </div> 
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 订单号	会员	消费金额	折扣金额	消费属性	时间 -->
                <el-table-column prop="order_id" label="订单号" fixed></el-table-column>
                <el-table-column prop="order_price" label="会员">
                    <template slot-scope="scope">
                        <p>{{scope.row.nickname}}</p>
                        <p>{{scope.row.mobile}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="total_price" label="消费金额" width="200"></el-table-column>
                <el-table-column prop="discount_price" label="折扣金额"></el-table-column>
                <el-table-column prop="consumer_type_cn" label="消费属性"></el-table-column>               
                <el-table-column prop="create_time" label="时间"></el-table-column>   

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
    </div>
  
</template>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
export default {
  data () {
    return {
        tableData:[],
        total:50,
        size:20,
        pageNum:1,
        form:{
            page:1,
            size:20,
        },
        timerange:[],
    }
  },
   mounted(){
        let that = this;       
        that.getList(that);
  },
  methods:{
      search(){
          let that = this;
          console.log(that.timerange)
          if(that.timerange != null){
            that.form.start_time = that.timerange[0]
            that.form.end_time = that.timerange[1]  
          }else{
            that.form.start_time = ''
            that.form.end_time = ''
          }
          
          that.getList()
      },
    changePage(val){
        let that = this;
        that.pageNum = val;
        that.form.page = that.pageNum;
        that.getList()
    },

    getList(){
        let that = this;
        abc.get(that,potUrl.consumerlist,that.form,(res)=>{
            that.tableData = res.data.list;
            that.total = res.data.total;
        })//列表
    }
  }
}
</script>
